<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
		
        <div class="container mt-1">
          <el-form inline size="small">
			<div class="flex items-center search_form">
				<div>
					配送方式：
					<!-- <el-radio-group v-model="searchForm.status" size="small" style="margin-right: 10px;">
						<el-radio label="-1">不限</el-radio>
						<el-radio label="1">线上配送</el-radio>
						<el-radio label="2">线下配送</el-radio>
					</el-radio-group> -->
					<el-select
					v-model="searchForm.type"
					placeholder="请选择"
					style="width: 200px; margin-right: 10px;"
					size="small"
					>
						<el-option
						label="不限"
						value="-1"
						></el-option>
						<el-option
						label="线上配送"
						value="1"
						></el-option>
						<el-option
						label="线下配送"
						value="2"
						></el-option>
					</el-select>
				</div>
				<div>
					订单状态：
					<el-select
					v-model="searchForm.status"
					placeholder="请选择"
					style="width: 200px; margin-right: 10px;"
					size="small"
					>
					<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					></el-option>
					</el-select>
				</div>
				<div>
					下单时间：
					<el-date-picker
					v-model="time"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					style=" margin-right: 10px;"
					size="small"
					></el-date-picker>
				</div>
				<div>
					物流编号：
					<el-input v-model="searchForm.deliveryCode" placeholder="请输入物流编号" style="width: 200px; margin-right: 10px;" size="small"></el-input>
				</div>
				<div>
					物流名称：
					<el-input v-model="searchForm.deliveryName" placeholder="请输入物流名称" style="width: 200px;" size="small"></el-input>
				</div>
				 <div style="margin-left: 10px;">
					<el-button type="primary" size="mini" @click="mySearch">搜索</el-button>
					<el-button size="mini" @click="reset">重置</el-button>
					<!-- <el-button type="primary" size="mini" @click="addBtn">添加</el-button> -->
				 </div>
			</div>
			
           
			
           
          </el-form>
		    <br>
		  <el-button size="mini" type="primary" @click="mergeDeliveryBtn">合并发货</el-button>
       
        </div>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
        size="mini"
        height="600px"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
		@selection-change="handleSelectionChange"
      >
	  	<el-table-column
			type="selection"
			width="55" />
        <el-table-column
          prop="id"
          label="ID"
          min-width="50"
        />
        <el-table-column label="商品名称"
	  					align="center"
                         prop="goods_name"
                         min-width="100"
                         :show-overflow-tooltip="true">
		
        </el-table-column>
		<el-table-column  label="商品图片"   align="center">
			      <template slot-scope="scope">
			         <div>
						<el-image style="width: 100px; height: 50px" 
						:preview-src-list="[$baseUrl+'/storage/'+scope.row.image]"
						:src="$baseUrl+'/storage/'+scope.row.image"></el-image>
			 		</div>
			      </template>
			  </el-table-column>
       <el-table-column label="配送方式"
		                 prop="type"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <!-- <div v-if="scope.row.type==1">线上配送</div>
                            <div v-if="scope.row.type==2">线下配送</div> -->
							<el-tag v-if="scope.row.type==1" effect="dark" type="info">线上配送</el-tag>
							<el-tag v-if="scope.row.type==2" effect="dark" type="success">线下配送</el-tag>
                        </template>
                        </el-table-column>
		<el-table-column label="数量"
		                 prop="num"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column>
        <el-table-column label="总价"
		                 prop="total_amount"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column>
		 <el-table-column label="兑换使用积分"
		                 prop="use_point"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
			<template slot-scope="scope">
				<div v-if="scope.row.use_point">{{scope.row.use_point}}</div>
				<div v-else>0</div>
			</template>
		</el-table-column>
        <el-table-column label="订单状态"
		                 prop="status"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status==1" effect="dark" type="info">待支付</el-tag>
                            <el-tag v-if="scope.row.status==2" effect="dark" type="success">已支付未配送</el-tag>
                            <el-tag v-if="scope.row.status==3" effect="dark" type="warning">已支付配送中</el-tag>
                            <el-tag v-if="scope.row.status==4" effect="dark" type="primary">已完成</el-tag>
                        </template>
        </el-table-column>
        <!-- <el-table-column label="赠送积分"
		                 prop="reward_points"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column> -->
        <!-- <el-table-column label="物流编号"
		                 prop="deliveryCode"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column> -->
        <!-- <el-table-column label="支付方式"
		                 prop="pay_type"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div v-if="scope.row.pay_type==1">微信支付</div>
                            <div v-if="scope.row.pay_type==2">积分兑换</div>
                        </template>
        </el-table-column> -->
        <!-- <el-table-column label="使用积分"
		                 prop="use_point"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column> -->
        

        <el-table-column label="下单时间"
		                 prop="add_time"
						width="200"
						 align="center">
		</el-table-column>
        
		<el-table-column label="收货信息"
		                 prop="address"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
			<template slot-scope="scope">
				<div v-if="scope.row.address_info">
					{{ scope.row.address_info.name }} {{ scope.row.address_info.phone }}
				</div>
				<div v-if="scope.row.address_info">
					{{ scope.row.address_info.address_info }}
				</div>
			</template>
		</el-table-column>
		<el-table-column label="物流编号"
		                 prop="deliveryCode"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div v-if="scope.row.deliveryCode">
						<el-button type="text" 
							@click="viewLogistics(scope.row.deliveryCode)"
						  size="mini">{{scope.row.deliveryCode}}</el-button>
					</div>
					<div v-else>
						-
					</div>
				</template>
		</el-table-column>
		<el-table-column label="物流名称"
		                 prop="deliveryName"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div v-if="scope.row.deliveryName">
						{{ scope.row.deliveryName }}
					</div>
					<div v-else>
						-
					</div>
				</template>
		</el-table-column>
		<!-- <el-table-column label="发货时间"
		                 prop="send_time"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div v-if="scope.row.send_time">
						{{ scope.row.send_time }}
					</div>
					<div v-else>
						-
					</div>
				</template>
		</el-table-column> -->
		<!-- <el-table-column label="支付时间"
		                 prop="pay_time"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div v-if="scope.row.pay_time">
						{{ scope.row.pay_time }}
					</div>
					<div v-else>
						-
					</div>
				</template>
		</el-table-column> -->
        <el-table-column label="操作" min-width="200" fixed="right">
          <template slot-scope="scope">
			<el-button type="text" @click="viewDetail(scope.row)">订单详情</el-button>
			<el-button type="text" @click="editRow(scope.row)">订单状态</el-button>
			 <!-- <el-button type="text" @click="editRow(scope.row)" v-if="scope.row.status==2">发货</el-button> -->
			<el-button type="text" @click="delRow(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
	  <div class="page">
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div>
    </el-card>
	
	<!-- 新增角色 -->
	<el-dialog
	  :title="title"
	  :visible.sync="formShow"
	  :close-on-click-modal="false"
	  width="600px">
	  <el-form ref="form" :model="form" label-width="120px">
		  <el-form-item label="状态" prop="age">
			<el-select v-model="form.status" style="width: 200px; margin-right: 10px;" size="small" placeholder="请选择状态">
				<el-option
				v-for="item in statusOptions"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				></el-option>
			</el-select>
		  </el-form-item>
		  <!-- <div>
				<el-form-item label="物流名称" prop="logistics_name">
					<el-input v-model="form.deliveryName" placeholder="请输入物流名称" size="small"></el-input>
				</el-form-item>
				<el-form-item label="物流编号" prop="logistics_no">
					<el-input v-model="form.deliveryCode" placeholder="请输入物流编号" size="small"></el-input>
				</el-form-item>
		  </div> -->
		  
		  
	  </el-form>
	  <span slot="footer" class="dialog-footer">
	    <el-button size="mini" @click="formShow = false">取 消</el-button>
	    <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
	  </span>
	</el-dialog>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="detailShow"
      :close-on-click-modal="false"
      width="800px">
      <div class="order-detail">
        <h3>订单基本信息</h3>
        <el-descriptions border :column="2" :size="'small'">
          <el-descriptions-item label="订单ID">{{ orderDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{ orderDetail.goods_name }}</el-descriptions-item>
          <el-descriptions-item label="配送方式">
            <el-tag v-if="orderDetail.type==1" effect="dark" type="info">线上配送</el-tag>
            <el-tag v-if="orderDetail.type==2" effect="dark" type="success">线下配送</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag v-if="orderDetail.status==1" effect="dark" type="info">待支付</el-tag>
            <el-tag v-if="orderDetail.status==2" effect="dark" type="success">已支付未配送</el-tag>
            <el-tag v-if="orderDetail.status==3" effect="dark" type="warning">已支付配送中</el-tag>
            <el-tag v-if="orderDetail.status==4" effect="dark" type="primary">已完成</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="数量">{{ orderDetail.num }}</el-descriptions-item>
          <el-descriptions-item label="总价">{{ orderDetail.total_amount }}</el-descriptions-item>
          <el-descriptions-item label="使用积分">{{ orderDetail.use_point || 0 }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ orderDetail.add_time }}</el-descriptions-item>
        </el-descriptions>

        <h3 style="margin-top: 20px;">支付信息</h3>
        <el-descriptions border :column="2" :size="'small'">
          <el-descriptions-item label="支付时间">{{ orderDetail.pay_time || '-' }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <span v-if="orderDetail.pay_type==1">微信支付</span>
            <span v-if="orderDetail.pay_type==2">积分兑换</span>
			<span v-if="orderDetail.pay_type==3">组合支付</span>
            <span v-if="!orderDetail.pay_type">-</span>
          </el-descriptions-item>
        </el-descriptions>

        <h3 style="margin-top: 20px;">物流信息</h3>
        <el-descriptions border :column="2" :size="'small'">
          <el-descriptions-item label="物流名称">{{ orderDetail.deliveryName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物流编号">{{ orderDetail.deliveryCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="发货时间">{{ orderDetail.send_time || '-' }}</el-descriptions-item>
        </el-descriptions>

        <h3 style="margin-top: 20px;">收货信息</h3>
        <el-descriptions border :column="1" :size="'small'" v-if="orderDetail.address_info">
          <el-descriptions-item label="收货人">{{ orderDetail.address_info.name }} {{ orderDetail.address_info.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ orderDetail.address_info.address_info }}</el-descriptions-item>
        </el-descriptions>
        <div v-else>暂无收货信息</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailShow = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 物流信息对话框 -->
    <el-dialog
      title="物流详情"
      :visible.sync="logisticsShow"
      :close-on-click-modal="false"
      width="900px">
      <div v-if="loadingLogistics" class="loading">
        <el-loading-spinner></el-loading-spinner>
        <p>正在加载物流信息...</p>
      </div>
      <div v-else-if="logisticsError" class="error">
        <el-alert :title="logisticsError" type="error" show-icon></el-alert>
      </div>
      <div v-else-if="logisticsData" class="logistics-detail" style="height: 500px;overflow: scroll;">
        <h3>物流单号：{{ logisticsData.nu }}</h3>
        <h3>快递公司：{{ logisticsData.com }}</h3>
        <div class="logistics-timeline">
          <div v-for="(item, index) in logisticsData.data" :key="index" class="logistics-item" :class="{ 'first': index === 0 }">
            <div class="timeline-dot" :class="{ 'active': index === 0 }"></div>
            <div class="timeline-content">
              <div class="timeline-time">{{ item.time }}</div>
              <div class="timeline-text">{{ item.context }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="logisticsShow = false">关闭</el-button>
      </span> -->
    </el-dialog>
	<el-dialog
      title="合并发货"
      :visible.sync="showHbfh"
      :close-on-click-modal="false"
      width="900px">
        <div>
            <hbfh ttype="2" 
				v-if="showHbfh"
			@sendConfirm="sendConfirm"	
			:orderId="orderIds" :addressId="addressId" />
        </div>
    </el-dialog>
  </div>
</template>
<script>
 import hbfh from '@/components/hbfh.vue'
  export default {
		components:{
			hbfh
		},
    data() {
      return {
        title:'新增',
		form:{
			id:null,
			status:0, //状态
			deliveryName:'', //物流名称
			deliveryCode:'', //物流编号
		},
		list:[],
		page:1,
		pageSize:10,
		searchForm:{
			type:'-1',
			deliveryName:'', //物流名称
			deliveryCode:'', //物流编号
			status:'-1', //状态
			payType:'1', //支付方式
		},
		time:[],
        detailShow: false,
        orderDetail: {},
        logisticsShow: false,
        logisticsData: null,
        loadingLogistics: false,
        logisticsError: null,
        options:[
			{
				value:'-1',
				label:'全部'
			},
			{
				value:'1',
				label:'待支付'
			},
			{
				value:'2',
				label:'已支付未配送'
			},
			{
				value:'3',
				label:'已支付配送中'
			},
			{
				value:'4',
				label:'已完成'
			}
		], //奖品列表

		statusOptions:[
			{
				value:'1',
				label:'待支付'
			},
			{
				value:'2',
				label:'已支付未配送'
			},
			{
				value:'3',
				label:'已支付配送中'
			},
			{
				value:'4',
				label:'已完成'
			}
		],
		selection:[],
		orderIds:'',
		addressId:'',
		showHbfh:false,
      }
    },
    mounted() {
		this.lodeList()
    },
    methods: {
        //获取奖品列表
       sendConfirm(){
			this.showHbfh = false
			this.lodeList()
		},
		mergeDeliveryBtn(){
			if(this.selection.length == 0){
				this.$message.warning('请选择要合并的记录')
				return
			}
			this.showHbfh = true
			this.orderIds = this.selection.map(item => item.id).join(',')
			this.addressId = this.selection[0].address_id
		},
		handleSelectionChange(val) {
          this.selection = val;
        },
		
		addBtn(){
			this.form = {
				id:null,
                name:"",
                probability:"", //概率
                desc:'', //备注
			}
			this.title = '新增'
			this.formShow = true
		},

		reset(){
			this.searchForm = {
				type:'-1',
				deliveryName:'', //物流名称
				deliveryCode:'', //物流编号
				status:'-1', //状态
				payType:'2', //支付方式
			}
			this.time = []
			this.mySearch()
		},
		
		editRow(row,type){
			console.log(row)
			this.type = type
			this.title = '编辑'
			for(let i in this.form){
				this.form[i] = row[i]
			}
			this.formShow = true
		
		},
		
		confirm(){
		
		    this.$api.post('/admin/editOrder',this.form).then(res=>{
		    	  if(res.code==200){
					  this.formShow = false
		    	  		this.lodeList()
						this.$message({
								type: 'success',
								message: res.msg
							})
		    	  }else{
						this.$message({
								type: 'error',
								message: res.msg
							})
				  }
		    })
		},
		delRow(id){
			this.$confirm('确定删除', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						let params = {
							dd:{id}
						}
					  this.$api.post('/admin/delOrder',params).then(res=>{
					  	  if(res.code==200){
					  	  	this.lodeList()
					  	  }
					  })
			  })
	   },
      lodeList(){
         if(this.time.length>0){
			this.searchForm.start_time = this.time[0]
			this.searchForm.end_time = this.time[1]
		}
	  let params = {
	           page:this.page,
	           pageSize:this.pageSize,
			   searchForm:this.searchForm
	    }
	 
	  this.$api.post('/admin/getOrderList',params).then(res=>{
		  let data = res.data
		  this.page_totle = data.count
		  this.list = data.result
	  })
	},

      // 查看订单详情
      viewDetail(row) {
        this.orderDetail = { ...row };
        this.detailShow = true;
      },

      // 查看物流信息
      viewLogistics(deliveryCode) {
        if (!deliveryCode) {
          this.$message.warning('物流单号不存在');
          return;
        }
        
        this.logisticsShow = true;
        this.loadingLogistics = true;
        this.logisticsError = null;
        this.logisticsData = null;
        
        const params = {
          deliveryCode: deliveryCode
        };
        this.$api.post('/api/getLogisticsInfo', params).then(res => {
          this.loadingLogistics = false;
       
          if (res.code === 200 && res.data) {
			console.log(res.data)
            this.logisticsData = res.data;
          } else {
            this.logisticsError = res.msg || '获取物流信息失败';
          }
        }).catch(error => {
          this.loadingLogistics = false;
          this.logisticsError = '网络错误，请稍后重试';
          console.error('获取物流信息失败:', error);
        });
      }
      
    }
  }
</script>

<style scoped>
.order-detail h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.logistics-detail h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
}

.loading {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.error {
  margin-bottom: 20px;
}

.logistics-timeline {
  padding: 20px 0;
}

.logistics-item {
  display: flex;
  position: relative;
  padding-bottom: 20px;
}

.logistics-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background-color: #e4e7ed;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e4e7ed;
  flex-shrink: 0;
  margin-right: 15px;
  position: relative;
  z-index: 1;
}

.timeline-dot.active {
  background-color: #409eff;
  border: 2px solid #409eff;
}

.timeline-content {
  flex: 1;
  padding-bottom: 20px;
}

.timeline-time {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.timeline-text {
  font-size: 14px;
  color: #909399;
  line-height: 1.6;
}

.logistics-item.first .timeline-text {
  color: #303133;
}
</style>
